React JS
Dashboard
Module 1: React Basics
1.1
What is react and why react
1.2
Declarative vs Imperative
1.3
Component Architecture
1.4
One way data flow
1.5
React installation
Module 2: Parent-Child Component Communication
2.1
Functional Component
2.2
Class component
2.3
Analyzing a standard react project
2.4
Introduction to JSX
2.5
Props with functional component
2.6
Props with class component
2.7
Constructor
2.8
State in react
2.9
Destructuring props and state
Module 3: Event Handling
3.1
Events and Event Handling
3.2
Binding event handlers
3.3
Passing methods as props
Module 4: Conditional and List Rendering
4.1
Conditional Rendering
4.2
List rendering
4.3
List and keys
Module 5: Adding CSS and Bootstrap
5.1
CSS with React inline style
5.2
CSS Stylesheets in React
5.3
CSS modules
5.4
How to add and use Bootstrap
Module 6: Hooks
6.1
Introduction to Hooks
6.2
useState hook
6.3
useState hook with object
6.4
useState Hook with array
6.5
Using state with class and functional component
6.6
useEffect Hook
6.7
Conditionally run useEffect
6.8
useContext Hook
6.9
React forms and Form handling
6.10
Controlled component in react form
6.11
Controlled component with function component and useState
6.12
Handling multiple inputs in form
6.13
Handling multiple inputs in functional component
6.14
Check box,drop down menu and text area in React form
6.15
Multiple checkbox in React form
6.16
REFS in React
6.17
Uncontrolled Component
6.18
Callback Refs
6.19
useRef Hook and uncontrolled component
6.20
useRef Hook
Module 7: React Router
7.1
React Router Introduction
7.2
Installing React Router
7.3
Configuring Routes
7.4
Link Component in React Router
7.5
Active Links using React Router
7.6
Navigating Programmatically
7.7
Page not found in React Router
7.8
Nested Routes in React Router
7.9
Index Route in React Router
7.10
Dynamic Routes in React Router
7.11
useParams in React Router
7.12
useSearchParams in React Router
7.13
Relative and absolute path
7.14
Lazy Loading
7.15
Form Validation
Module 8: Formik and Yup
8.1
Introduction to Formik and Yup
8.2
Working with formik library
8.3
Working with Formik and Yup Library
8.4
More validations using Formik and Yup
8.5
Creating form with Formik components
Module 9: React Bootstrap Library
9.1
React Bootstrap Library
9.2
Container and Grid system with React-Bootstrap
9.3
2 simple ways to add images in React App
9.4
Creating cards using React Bootstrap
9.5
Create navbar using React-Bootstrap
9.6
Creating Carousel using React-Bootstrap
Module 10: React Axios
10.1
useReducer Hook
10.2
Fetch API
10.3
Introduction to React AXIOS
10.4
How to setup Axios with React
10.5
How to make a GET request in Axios
10.6
How to make a POST request in Axios
10.7
Create a fake API and insert data in it
10.8
Read operation in CRUD app
10.9
Delete operation in CRUD app
10.10
Update operation in React CRUD App
Module 11: React Redux
11.1
Introduction to React Redux
11.2
Getting started with React Redux
11.3
Three core concepts of Redux
11.4
Three principles of Redux
11.5
Actions
11.6
Reducers
11.7
Store
11.8
Cakes and ice-creams
11.9
Multiple Reducers
11.10
Combine Reducers
11.11
Middleware
11.12
Async actions
11.13
Redux thunk
11.14
Cake shop application
11.15
Actions for cake shop app
11.16
Reducer for cake shop app
11.17
Store for cake shop app
11.18
Connect
11.19
React Redux with Hooks
11.20
useSelector Hook
11.21
useDispatch Hook
11.22
Action and reducers for ice cream
11.23
Logger middleware
11.24
Action payload
11.25
mapStateToProps
11.26
mapDispatchToProps
Module 12: Project
12.1
Introduction to project
12.2
Setting up project
12.3
Adding the header component
12.4
Adding the Cart Button component
12.5
Adding Meals Component
12.6
Adding individual mealitem and displaying them
12.7
Adding Form
12.8
Working on Cart component
12.9
Adding a Modal via React Portal
12.10
Managing Cart and Modal State
12.11
Adding a cart context
12.12
Using the context
12.13
Adding a cart reducer
12.14
Working with Refs and Forward Refs
12.15
Outputting Cart items
12.16
Working on a more complex reducer logic
12.17
Making items removable
12.18
Project completed
Your browser does not support the video tag.
Select a lecture to begin